
import Cart from "./Cart";
import TopicContainer from './TopicContainer';
import Calculator from './Calculator';
import ArticleList from './ArticleList';
import Welcome from './Welcome';

import './App.css';

const nickname = '拐角遇到猪';

function App() {
  return (
    <div>
      <h3>从父组件到子组件 / 从子组件到父组件</h3>
      <Cart />

      <h3>跨级组件通信 ( Context.Provider / Context.Consumer )</h3>
      <TopicContainer />

      <h3>非嵌套组件通信: 兄弟组件间通信 (通过 状态提升 实现)</h3>
      <Calculator />

      <h3>采用 事件发布-订阅模式 在任意组件之间进行通信</h3>
      <ArticleList />

      <h3>通过 `props.children`  获取标签体( 类似于 `Vue` 中的插槽)</h3>
      <Welcome account="sanfeng">
        <div>sanfeng</div>
      </Welcome>
      <Welcome account="zhangsanfeng">
        <div>三丰</div>
      </Welcome>
      <Welcome account="guaijiao">
        <div>热烈欢迎 { nickname }</div>
        <div>welcome { nickname }</div>
      </Welcome>
    </div>
  );
}

export default App;
